<!--开始评审-->
<template>
	<div>
		<div class="my-form-container" :style="{'height':outHeight+'px'}">
            <el-form ref="ruleForm" :model="ruleForm" class="demo-ruleForm">
                <el-row class="my-form-item">
                    <el-col :span="8">
                        <div class="my-form-item-label">课题名称</div>
                        <div class="my-form-item-value">{{ruleForm.fillSubjectName}}</div>
                    </el-col>
                    <el-col :span="16">
                        <div class="my-form-item-label">研究内容</div>
                        <div class="my-form-item-value">{{ruleForm.researchContent}}</div>
                    </el-col>
                </el-row>
                <div class="middle" :style="{'height':allHeight+'px'}">
                    <div class="middle1 color border-color noBorder">评价标准</div>
                    <div class="middle2">
                        <div class="color border-color">评价项目</div>
                        <div class="item border-color" :class="{'noBorder':i == 4}" v-for="(i,k) in ruleForm.list" :key="k">{{i.key1}}</div>
                    </div>
                    <div class="middle2 width279">
                        <div class="color border-color width279">评审权重</div>
                        <!-- <div class="item border-color width279" :class="{'noBorder':i == 4}"  v-for="(i,k) in ruleForm.list" :key="k">{{i.key2}}>{{i}}</div> -->
                        <div class="item border-color width279" :class="{'noBorder':i == 4}"  v-for="(i,k) in ruleForm.list" :key="k">{{i.key2}}</div>
                    </div>
                    <div class="middle2">
                        <div class="color border-color width100">评审标准</div>
                        <div class="gradeList">
                            <div v-for="i in ruleForm.gradeList" class="color border-color" :key="i" :class="{'noBorder1':i == 4}">{{i}}</div>
                        </div>
                        <div>
                            <!-- <div class="gradeList"  v-for="(m,k) in ruleForm.list" :key="k">{{m.key1}} -->
                            <div class="gradeList"  v-for="(m,k) in ruleForm.list" :key="k">
                                <div v-for="i in 4" class="border-color color2" :key="i" :class="{'noBorder1':i == 4,'noBorder':m == 4}">{{m.k3}}</div>
                            </div>
                        </div>
                        
                    </div>
                </div> 
                <el-row class="my-form-item">
                    <el-col :span="24">
                        <div class="my-form-item-label">评审分数</div>
                        <div class="my-form-item-value">
                            <el-input class="width220" v-model="ruleForm.score"></el-input>
                        </div>
                    </el-col>
                </el-row>
                <el-row class="my-form-item lastOne" style="border:none">
                    <el-col :span="24">
                        <div class="my-form-item-label">备注</div>
                        <el-form-item  prop="reason">
                            <div class="my-form-item-value" style="line-height:88px">
                                <el-input class="inputWidth" v-model="ruleForm.opinion" type="textarea" :rows="6"></el-input>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
		</div>
		<div class="button-group">
			<div class="" @click="save">保存</div>
            <div class="" @click="cancel">取消</div>
		</div>
	</div>
</template>

<script>
import {startPS,savePSscore} from "@/api/teachingTopic";

  export default {
		data(){
		  return {
            allHeight:120+60*4,
            outHeight:416+60*4,
            ruleForm:{},
            totalHeight:120+(60*4),
          }
		},
        mounted(){
            this.initList()
        },
        methods: {
            async initList(){
                let res = await startPS({activityId:this.$route.query.activityId,fillId:this.$route.query.fillId});
                this.ruleForm = res.data
            },
            //保存数据
            async save(){
                let params = {
                    activityId:this.$route.query.activityId,
                    currentFlow:this.$route.query.currentFlow,
                    currentStage:this.$route.query.currentStage,
                    fillId:this.$route.query.fillId,
                    id:this.ruleForm.id,
                    opinion:this.ruleForm.opinion,
                    score:this.ruleForm.score
                }
                let res = await savePSscore(params);
                if(res.code == 200){
                    this.$router.push({
                        path:'/teachingTopics/review/expert/ps',
                        query:{
                            activityId:this.$route.query.activityId,
                            currentFlow:this.$route.query.currentFlow,
                            currentStage:this.$route.query.currentStage,
                            fillId:this.$route.query.fillId
                        }
                    })
                }
            },
            //取消
            cancel(){
                this.$router.push({
                    path:'/teachingTopics/review/expert/ps',
                    query:{
                        activityId:this.$route.query.activityId,
                        currentFlow:this.$route.query.currentFlow,
                        currentStage:this.$route.query.currentStage,
                        fillId:this.$route.query.fillId
                    }
                })
            }
        }
  };
</script>
<style scoped lang="less" scoped>
@import "../../../../styles/commonCss.less";
    /deep/.my-form-item-label{justify-content: center;padding: 0!important;}
	.inputWidth{width: 640px;margin-top: 20px;}
    .width220{width: 220px;}
    .lastOne{
        border:none;height:176px;
        /deep/.el-form-item__error {
            top:96%;
        }
    }
    .middle{
        width: 100%;
        display:flex;
        border-bottom: 1px solid rgba(0, 76, 167, 0.39);
        .middle1{
            width: 280px;
            height: 100%;
        }
        .color{
            background: rgba(0, 76, 167, 0.1);
            color: #004CA7;
            height: 100%;
            font-size: 16px;
            font-weight: bold;
            display: flex;
            flex: none;
            align-items: center;
            justify-content: center;
        }
        .border-color{
            border-bottom: 1px solid rgba(0, 76, 167, 0.39);
            border-right: 1px solid rgba(0, 76, 167, 0.39);
        }
        .middle2{width:340px;height: 120px;}
        .item{
            // width: 294px;
            height: 60px;
            color: #004CA7;
            text-align: center;
            line-height: 60px;
        }
        .noBorder{border-bottom:none!important;}
        .noBorder1{border-right:none!important;}
        .width279{width: 279px;}
        .width100{width: 962px;border-right: none;height: 60px;}
        .gradeList{
            display: flex;
            div{
                width: 240.5px;
                height: 60px;
                line-height: 60px;
            }
        }
        .color2{
            font-size: 16px;
            display: flex;
            flex: none;
            align-items: center;
            justify-content: center;
        }
    }
</style>